<template>
  <div :ref="index" :id="index" class="tag">标注坐标：{{this.x+','+this.y+','+this.z}}</div>
</template>

<script>
import {  CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
import {scene} from '../threejs/index.js'
// 该组件多次复用标注三维场景中不同的对象
export default {
  name: "threetag",
  data: function () {
    return {
    };
  },
  props:['x','y','z','index'],

  mounted: function () {
    // 获取div元素(作为标签)
    // var div = document.getElementById(this.index);
    var div = this.$refs[this.index];
    //div元素包装为CSS2模型对象CSS2DObject
    var label = new CSS2DObject(div);
    div.style.pointerEvents = "none"; //避免HTML标签遮挡三维场景的鼠标事件
    label.position.set(this.x,this.y,this.z)
    scene.add(label);//标签添加到场景中
  },
};
</script>

<style scoped>
.tag {
  /* border:solid #009999 1px; */
  background: linear-gradient(#00ffff, #00ffff) left top,
    linear-gradient(#00ffff, #00ffff) left top,
    linear-gradient(#00ffff, #00ffff) right bottom,
    linear-gradient(#00ffff, #00ffff) right bottom;
  background-repeat: no-repeat;
  background-size: 1px 6px, 6px 1px;
  background-color: rgba(0, 66, 66, 0.4);
  color: #ffffff;
  font-size: 18px;
  padding: 8px 12px;
}
</style>
